<template>
  <div class="lrbox" style="height: 100vh; position: relative">
    <div class="account_v2_inner">
      <div class="account_v2_inner-left">
        <!-- 注册 -->
        <div class="inner-left-regist" v-if="loginOrRegist === 'regist'">
          <div class="center">
            <input
              type="text"
              placeholder="你的手机号码"
              class="ipt"
              v-model="phone"
            />
            <button type="button" class="btn" @click="toRegist">
              立即注册
            </button>
            <p class="agreement">
              注册视为同意<a href="javascript:;">《马蜂窝用户使用协议》</a>
            </p>
            <p>
              <router-link to="/">返回首页</router-link>
            </p>
          </div>
        </div>
        <!-- 登录 -->
        <div class="inner-left-login" v-else>
          <div class="login-header">
            <div class="login-header-left" @click="sweepOrpwTab(true)">
              扫码登录
            </div>
            <div class="login-header-right" @click="sweepOrpwTab(false)">
              密码登录
            </div>
            <div id="border-bottom" ref="borderBottom"></div>
          </div>
          <!-- 扫码登录 -->
          <div class="sweepYard" v-if="sweepYardOrpassword">
            <p class="sweepYard-text">
              打开<a href="" style="color: #4d97ff; text-decoration: none">
                马蜂窝APP
              </a>
              -V9.3.38及以上版本扫描二维码， 免输入，更快更安全。
            </p>

            <div class="qrCode">
              <img
                src="../../../public/images/CoUBUmElqk2AdP3PAAAEAOXjjzc485.png"
                alt=""
              />
              <!-- 隐藏图 -->
              <img
                src="../../../public/images/img_explain.png"
                alt=""
                class="occultationImg"
              />
            </div>
            <router-link to="/">返回首页</router-link>
          </div>
          <!-- 密码登录 -->
          <div v-else class="passwordLogin">
            <input
              type="text"
              class="ipt"
              placeholder="你的邮箱/手机号"
              v-model="username"
            />
            <input
              type="password"
              class="ipt"
              placeholder="你的密码"
              v-model="password"
            />
            <a href="javascript:;" class="unlearnPassword">忘记密码</a>
            <button class="btn" @click="toLogin">登录</button>
            <router-link to="/">返回首页</router-link>
          </div>
        </div>
        <!-- 底部logo -->
        <div class="inner-left-footer">
          <p>用合作网站账号直接登录</p>
          <div class="backgroundIcon">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
          </div>
        </div>
      </div>
      <!-- 右侧图片 -->
      <div class="account_v2_inner-right">
        <a href="javascript:;" class="downloadApp"></a>
      </div>
      <!-- 底部切换 -->
      <p class="cutover">
        {{ loginOrRegist === "regist" ? "已经注册?" : "还没有账号?" }} &nbsp;
        <a href="javascript:;" @click="cutoverTab">{{
          loginOrRegist === "regist" ? "马上登录" : "马上注册"
        }}</a>
      </p>
    </div>
  </div>
</template>

<script>
import { login } from "../../api/registOrLogin";
let regphone = /^1[3-9][0-9]{9}$/;
let regpassword = /^[0-9A-Za-z]{6,18}$/;
export default {
  name: "LoginOrRegist",
  data() {
    return {
      loginOrRegist: "regist",
      sweepYardOrpassword: true,
      phone: "",
      username: "",
      password: "",
    };
  },
  mounted() {
    // document.documentElement.style.backgroundImage =
    //   "url(https://images.mafengwo.net/images/signup/wallpaper/21.jpg)";
  },
  methods: {
    cutoverTab() {
      if (this.loginOrRegist === "regist") {
        this.sweepYardOrpassword = true;
        this.loginOrRegist = "login";
        return;
      }
      this.loginOrRegist = "regist";
    },
    sweepOrpwTab(isShow) {
      this.sweepYardOrpassword = isShow;
    },
    toRegist() {
      let { phone } = this;
      if (!regphone.test(this.phone)) {
        alert("请输入正确的手机号");
        return;
      }
      localStorage.setItem("username", phone);
      this.$router.history.push({
        name: "Regist",
        params: {
          phone,
        },
      });
    },
    async toLogin() {
      let { username, password } = this;
      if (regphone.test(username) && regpassword.test(password)) {
        let res = await login(username, password);
        if (!res) {
          console.log(res.cookie);
          localStorage.setItem("cookie", res.cookie);
          alert("校验成功");
          return;
        }
        alert("用户名或密码错误");
      } else {
        alert("账号格式或密码格式不正确");
      }
    },
  },
  watch: {
    sweepYardOrpassword(newValue) {
      // console.log(this.$refs.borderBottom);
      if (newValue) {
        this.$refs.borderBottom.style.left = 35 + "px";
      } else {
        this.$refs.borderBottom.style.left = 155 + "px";
      }
    },
  },
};
</script>

<style scoped>
.lrbox {
  width: 100%;
  height: 100%;
  background-image: url("https://images.mafengwo.net/images/signup/wallpaper/21.jpg");
}
.account_v2_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 730px;
  height: 434px;
  background-color: white;
  border-radius: 8px;
}
.account_v2_inner-left {
  float: left;
  width: 440px;
  box-sizing: border-box;
  padding: 0 60px;
  height: 100%;
  position: relative;
}
.account_v2_inner-right {
  float: right;
  position: relative;
  background-image: url("../../../public/images/img_download.png");
  width: 290px;
  height: 100%;
}
.account_v2_inner-right .downloadApp {
  position: absolute;
  bottom: 18px;
  right: 12px;
  width: 30px;
  height: 30px;
}
.inner-left-footer {
  position: absolute;
  bottom: 10px;
}
.inner-left-footer p {
  margin: 0;
  padding: 12px 0;
  font-size: 14px;
  color: #999;
}
.backgroundIcon {
  display: flex;
}
.backgroundIcon a {
  width: 36px;
  height: 36px;
  margin-right: 32px;
  background-repeat: no-repeat;
}
.backgroundIcon a:nth-of-type(1) {
  background-image: url("../../../public/images/ic_weibo.png");
}
.backgroundIcon a:nth-of-type(2) {
  background-image: url("../../../public/images/ic_qq.png");
}
.backgroundIcon a:nth-of-type(3) {
  background-image: url("../../../public/images/ic_weixin.png");
}
.inner-left-regist {
  width: 100%;
  height: 337px;
}
.center {
  margin-top: 50%;
  transform: translateY(-30%);
}
.ipt {
  outline: none;
  width: 320px;
  height: 40px;
  box-sizing: border-box;
  padding: 6px 0 6px 12px;
  border: 1px solid #f6f7f9;
  border-radius: 4px;
  background-color: #f6f7f9;
  transition: border 1s, box-shadow 0.5s;
}
.ipt:focus {
  border: 1px solid #ffa200;
  background-color: white;
  box-shadow: 0 0 5px #ffa200;
}
.btn {
  border: none;
  border-radius: 6px;
  width: 100%;
  height: 42px;
  margin-top: 17px;
  background-color: #ffa200;
  color: white;
  font-size: 20px;
  cursor: pointer;
}
.inner-left-regist .agreement {
  text-align: right;
  font-size: 12px;
  color: #ccc;
}
.inner-left-regist .agreement a {
  color: #999;
  text-decoration: none;
}
.inner-left-regist .agreement a:hover {
  text-decoration: underline;
  color: #3f200f;
}
.cutover {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 140px;
  height: 16px;
  padding: 4px 0;
  text-align: center;
  font-size: 12px;
  color: white;
  border-radius: 14px;
  background-color: rgba(0, 0, 0, 0.4);
}
.cutover a {
  color: #ffa200;
  text-decoration: none;
}
.cutover a:hover {
  text-decoration: underline;
}
.login-header {
  position: relative;
  display: flex;
  margin: auto;
  width: 240px;
}
.login-header > div {
  width: 120px;
  padding: 40px 0 12px 0;
  text-align: center;
  font-size: 18px;
  color: #999;
  cursor: pointer;
}
#border-bottom {
  position: absolute;
  bottom: 0;
  left: 35px;
  padding: 0;
  width: 50px;
  height: 4px;
  border-radius: 3px;
  background-color: #ffa200;
}
.sweepYard {
  margin-top: 26px;
  margin-bottom: 16px;
  font-size: 14px;
  text-align: center;
  color: #777;
}
.qrCode {
  position: relative;
}
.qrCode:hover .occultationImg {
  display: block;
}
.occultationImg {
  display: none;
  position: absolute;
  width: 208px;
  height: 306px;
  right: -120px;
  top: -100px;
  z-index: 3;
}
.passwordLogin {
  margin-top: 46px;
}
.passwordLogin .ipt {
  margin-bottom: 10px;
}
.unlearnPassword {
  float: right;
  text-decoration: none;
  font-size: 12px;
  color: #666;
}
.unlearnPassword:hover {
  color: #3f200f;
  text-decoration: underline;
}
</style>
